<template>
	<view class="">
		<u-navbar :is-back="true" title="报告详情" back-icon-color="#ffffff" :background="{backgroundColor:'#E62131'}"
			title-color="#ffffff"></u-navbar>
		<view class="topdate fliexs space_between colors" v-if="objtDetail">
			<span>{{objtDetail.coachName}}</span> <span>评价日期 {{objtDetail.commentTime}}</span>
		</view>
		<view class="names_title" v-if="objtDetail">
			{{objtDetail.studentName}}的课堂报告
		</view>
		<view class="centers">
			<view class="lsittitles fliexs">
				<view class="rigous"></view>
				<span class="xinxis">课程信息</span>
			</view>
		</view>
		<view class="teltlfts" v-if="objtDetail.classInfo">
			<view class="listta">
				<u-icon name="account-fill" size="28" color="#606266"></u-icon><span
					class="kename">{{objtDetail.classInfo.courseName}}</span>
			</view>
			<!-- <view class="listta">
				<u-icon name="coupon-fill" size="28" color="#606266"></u-icon> <span class="kename"></span>
			</view> -->
			<view class="listta">
				<u-icon name="account-fill" size="28" color="#606266"></u-icon> <span
					class="kename">{{objtDetail.coachName}}</span>
			</view>
			<view class="listta">
				<u-icon name="clock-fill" size="28" color="#606266"></u-icon> <span
					class="kename">{{objtDetail.classYear}}-{{objtDetail.classDate}}
					{{objtDetail.classStartTime}}~{{objtDetail.classEndTime}}</span>
			</view>
		</view>
		<view class="centers">
			<view class="lsittitles fliexs">
				<view class="rigous"></view>
				<span class="xinxis">课程总结</span>
			</view>
		</view>
		<view class="teltlfts" v-if="!isEdd">
			<view class="listta">
				{{objtDetail.workOut.classroomReport}}
			</view>
		</view>
		<view class="teltlfts" style="padding-right: 30rpx;" v-if="isEdd">
			<u-input v-model="classroomReport" :type="type" :border="border" :height="height"
				:auto-height="autoHeight" />
		</view>
		<view v-if="isEdd" class=""
			style="display: flex;align-items: center;justify-content: flex-end;padding-right: 30rpx;">
			<u-upload :action="action" :header="header" :file-list="fileList" @on-success="onsuccess"></u-upload>
		</view>
		<view class="centers">
			<view class="lsittitles fliexs">
				<view class="rigous"></view>
				<span class="xinxis">学生表现</span>
			</view>
		</view>
		<view class="teltlfts">
			<view class="listta" v-for="(ims,idx) in objtDetail.score" :key="idx">
				<span class="kename">{{ims.name}}</span> <u-rate :count="count" :disabled="!isEdd"
					v-model="ims.score"></u-rate>
			</view>
		</view>
		<view class="centers">
			<view class="lsittitles fliexs">
				<view class="rigous"></view>
				<span class="xinxis">老师评语</span>
			</view>
		</view>
		<view class="teltlfts" v-if="!isEdd">
			<view class="listta">
				{{objtDetail.comment}}
			</view>
		</view>
		<view class="teltlfts" style="padding-right: 30rpx;" v-if="isEdd">
			<u-input v-model="commentPing" :type="type" :border="border" :height="height" :auto-height="autoHeight" />
		</view>
		<view class="" v-if="isEdd"
			style="display: flex;align-items: center;justify-content: flex-end;padding-right: 30rpx;padding-bottom: 200rpx;">
			<u-upload :action="action" :header="header" :file-list="filePingList"
				@on-success="onsuccesslist"></u-upload>
		</view>
		<view class="centers colors" v-if="!isEdd">
			<span v-if="objtDetail.studentUpList.length == 0">快来点一个赞吧~</span>
			<span v-else><span style="color: #b1b1b1;padding-right: 10rpx;"
					v-for="(item,index) in objtDetail.studentUpList" :key="index">{{item.nickName}}、</span>觉得很赞</span>
		</view>
		<view class="caozuolsiut fliexs" v-if="!isEdd">
			<view class="lsitas fliexs" @click="dianzanclicn" v-if="objtDetail.isUp == 0">
				<image class="zans" src="../../static/images/zan.png" mode=""></image>
				<span>点赞</span>
			</view>
			<view class="lsitas fliexs" @click="dianzanTwoclicn" v-if="objtDetail.isUp == 1">
				<image class="zans" src="../../static/images/zan1.png" mode=""></image>
				<span style="color: #E62131;">已赞</span>
			</view>
			<view class="lsitas fliexs" @click="topages(null)">
				<image class="zans" src="../../static/images/liuyan.png" mode=""></image>
				<!-- <image class="zans" src="../../static/images/liuyan1.png" mode=""></image> -->
				<span>留言</span>
			</view>
		</view>
		<view class="btnlsit" v-if="!isEdd">
			<view class="toptitles">
				留言
			</view>
			<view class="listlisu" v-for="(item,index) in objtDetail.studentLeaveList" :key="index">
				<image class="imagss" v-if="item.headImg" :src="item.headImg" mode=""></image>
				<image class="imagss" v-else src="../../static/images/me.png" mode=""></image>
				<view class="right_titles">
					<view class="toptitlex">
						<span class="titlstnae">{{item.nickName}}</span> <span
							style="padding-left: 20rpx;">{{item.createDate}}</span>
						<u-icon @click="modalactive(index)" name="more-dot-fill" color="#a7a7a7" size="60"
							v-if="item.isMine"></u-icon>
					</view>
					<view class="textcenter">
						{{item.leaveContent}}
					</view>
				</view>
				<view class="listListad" v-if="actives == index">
					<view class="uls">
						<view class="lis" @click="topages(item)">
							重新编辑
						</view>
						<view class="lis" style="border: none;" @click="removepalke">
							删除留言
						</view>
					</view>
				</view>
			</view>
		</view>


		<image class="addings" src="@/static/images/bianji1.png" alt="" v-if="!isEdd" @click="isClickedd(true)"></image>

		<view class="bneads w-btn-fixed" v-if="isEdd">
			<div class="btnlst fliexs space_between">
				<view class="btn_left center" @click="isClickedd(false)">
					返回
				</view>
				<view class="btn_left right" @click="okllists">
					保存
				</view>
			</div>

		</view>
	</view>
</template>

<script>
	import staticUrl from "@/common/config.js"
	export default {
		data() {
			return {
				isEdd: false,
				count: 5,
				type: 'textarea',
				border: true,
				height: 150,
				autoHeight: true,
				action: staticUrl.staticUrl,
				header: {
					accessToken: 'bearer ' + uni.$func.cache("token"),
				},
				fileList: [],
				imglsit: [],
				classroomReport: "",
				commentPing: "",
				filePingList: [],
				pingListr: [],
				id: "",
				objtDetail: null,
				actives: null,
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		onShow() {
			this.studentworkDetailApi()
		},
		methods: {
			modalactive(index) {
				this.actives = index
			},
			// 点赞
			dianzanclicn() {
				let obgs = {
					workId: this.objtDetail.workId,
					studentId: this.objtDetail.studentId,
					leaveType: 1
				}
				uni.$api.common.studentleaveaddLeave(obgs).then((res) => {
					uni.showToast({
						title: "操作成功",
						icon: 'none'
					})
					this.studentworkDetailApi()
				});
			},
			dianzanTwoclicn() {
				let obgs = {
					workId: this.objtDetail.workId,
					studentId: this.objtDetail.studentId,
					leaveType: 1
				}
				uni.$api.common.studentleavedelLeave(obgs).then((res) => {
					uni.showToast({
						title: "操作成功",
						icon: 'none'
					})
					this.studentworkDetailApi()
				});
			},
			studentworkDetailApi() {
				uni.$api.common.studentworkDetail(this.id).then((res) => {
					res.result.score = JSON.parse(res.result.score)
					this.objtDetail = res.result
				});
			},
			// 是否编辑
			isClickedd(isshow) {
				this.isEdd = isshow
			},
			// 课程总结图片上传成功
			onsuccess(e) {
				uni.showToast({
					title: "图片上传成功",
					icon: 'none'
				})
				this.imglsit.push(e.result.path)

			},
			onsuccesslist(e) {
				uni.showToast({
					title: "图片上传成功",
					icon: 'none'
				})
				this.pingListr.push(e.result.path)

			},
			topages(item) {
				let ids = "";
				let leaveContent = "";
				let leaveImg = "";
				if (item) {
					ids = item.id
					leaveContent = item.leaveContent
					leaveImg = item.leaveImg
				}
				this.actives = null;
				uni.navigateTo({
					url: "./leaveMessage?workId=" + this.objtDetail.workId + '&studentId=' + this.objtDetail
						.studentId + '&id=' + ids + '&leaveContent=' + leaveContent + '&leaveImg=' + leaveImg
				})
			},
			removepalke() {
				let obgs = {
					workId: this.objtDetail.workId,
					studentId: this.objtDetail.studentId,
					leaveType: 0
				}
				uni.$api.common.studentleavedelLeave(obgs).then((res) => {
					uni.showToast({
						title: "操作成功",
						icon: 'none'
					})
					this.actives = null;
					this.studentworkDetailApi()
				});
			},
			okllists() {
				let objs = {
					"id": this.objtDetail.workOut.id,
					"classroomImg": this.imglsit.join(','),
					"classroomReport": this.classroomReport,
					"studentWorks": [{
						"comment": this.commentPing,
						"commentImg": this.pingListr.join(','),
						"score": JSON.stringify(this.objtDetail.score),
						"id": this.id
					}]
				};
				uni.$api.common.updatecommentworkout(objs).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						this.isEdd = false;
						this.imglsit = [];
						this.pingListr = [];
						this.fileList = [];
						this.filePingList = [];
						this.commentPing = "";
						this.classroomReport = "";
						this.studentworkDetailApi()
					}, 2000)
				});
			},

		}
	}
</script>


<style lang="scss">
	.colors {
		color: #606266;
	}

	.topdate {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f2f2f2;
	}

	.names_title {
		text-align: center;
		padding: 35rpx 0rpx 20rpx;
		font-weight: bold;
	}

	.centers {
		padding: 20rpx;
	}

	.lsittitles {
		.rigous {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #E62131;
		}

		.xinxis {
			padding-left: 20rpx;
			font-weight: bold;
		}
	}

	.teltlfts {
		padding-left: 70rpx;
		margin-bottom: 20rpx;
		padding-right: 30rpx;

		.listta {
			line-height: 60rpx;

			.kename {
				color: #606266;
				padding-left: 14rpx;

			}
		}
	}

	.caozuolsiut {
		text-align: right;
		justify-content: flex-end;
	}

	.lsitas {
		padding-right: 30rpx;

		.zans {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}

	.btnlsit {
		padding: 40rpx 20rpx 80rpx;

		.toptitles {
			width: 100%;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f2f2f2;
			font-weight: bold;
		}

		.listlisu {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			position: relative;

			.imagss {
				width: 50rpx;
				height: 50rpx;
			}

			.right_titles {
				width: 90%;
				margin-left: 20rpx;

				.toptitlex {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.titlstnae {
						font-weight: bold;
						font-size: 26rpx;
					}
				}

				.textcenter {
					margin-top: 30rpx;
				}
			}

			.listListad {
				position: absolute;
				right: 100rpx;
				top: 20rpx;
				z-index: 9;
				text-align: center;
				background-color: #ffffff;
				border-radius: 5rpx;

				.uls {
					padding: 0 10rpx;

					.lis {
						padding: 30rpx 30rpx;
						border-bottom: 1rpx solid #e1e1e1;
					}
				}
			}
		}
	}

	.addings {
		width: 60rpx;
		height: 60rpx;
		position: fixed;
		right: 30rpx;
		bottom: 250rpx;
	}

	.btnlst {
		// margin-top: 350rpx;

		.btn_left {
			width: 49%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #b1b1b1;
			border: 1rpx solid #e1e1e1;
		}

		.right {
			background-color: #E62131;
			color: #ffffff;
		}
	}
</style>